<script setup>
import { ref, reactive, computed, nextTick, watch, onMounted } from 'vue'
// import { showMsg, showConfirm } from '@/assets/js/utils'
import { getVideoDevice, closeRtmp } from '@/assets/api/device'
import videoItem from '@/components/video/screenVideoItem.vue'
const defaultProps = {
    children: 'children',
    label: 'name',
}
const data = ref([])
function getData() {
    getVideoDevice().then((res) => {
        data.value = [
            {
                name: '视频中心',
                children: res.data,
            },
        ]
    })
}
getData()

const playType = ref('1')
const screenNum = computed(() => {
    if (playType.value == 'full') {
        return 0
    } else {
        return +playType.value
    }
})
const screenVideoRef = ref()
onMounted(() => {
    // getVideoSize()
})
const videoSize = reactive({
    width: 100,
    height: 100,
})
// 获取视频尺寸
// function getVideoSize() {
//     const screentWidth = screenVideoRef.value.clientHeight
//     const screentHeight = screenVideoRef.value.clientHeight
//     videoSize.width = screentWidth
//     videoSize.height = screentHeight
//     if (screenNum.value == 4) {
//         videoSize.width = screentWidth / 2
//         videoSize.height = screentHeight / 2
//     } else if (screenNum.value == 9) {
//         videoSize.width = screentWidth / 3
//         videoSize.height = screentHeight / 3
//     }
// }
const videoItemRefs = ref()
const playList = ref([])
watch(screenNum, () => {
    playList.value = playList.value.splice(0, screenNum.value)
})
function playVideo(data) {
    const index = playList.value.length % screenNum.value
    if (playList.value[index]) {
        const oldNubmer = playList.value[index].number
        closeRtmp(oldNubmer).then(() => {
            playList.value[index] = data
            nextTick(() => {
                videoItemRefs.value[index].updateVideo()
            })
        })
    } else {
        playList.value[index] = data
    }
}
const activeDevices = computed(() => {
    return playList.value.map((item) => item.number)
})
function handleNodeClick(data, node) {
    playList.value = playList.value.filter((item) => {
        return item !== ''
    })
    if (node.isLeaf) {
        let existIndex = -1
        for (let i = 0; i < activeDevices.value.length; i++) {
            if (activeDevices.value[i] == data.number) {
                existIndex = i
                break
            }
        }
        if (existIndex > -1) {
            // stopVideo(data, existIndex)
        } else {
            playVideo(data)
        }
    }
}
const isFullscreen = ref(false)
function fullscreenAction() {
    isFullscreen.value = true
}
function internalCloseVideo(indexOf, number) {
    playList.value.splice(indexOf, 1, '')
    closeVideo(number)
}
function closeVideo(number) {
    closeRtmp(number).then(() => {
        console.log('关闭成功', number)
    })
}
// import control from '@/components/video/videoControl.vue'
</script>
<template>
    <div class="white-box d-flex-1 d-flex d-flex-top">
        <div class="device-tree">
            <el-tree
                :data="data"
                :props="defaultProps"
                @node-click="handleNodeClick"
            >
                <template #default="{ data }">
                    <p
                        class="device-node"
                        :class="{
                            active: activeDevices.indexOf(data.number) >= 0,
                        }"
                    >
                        {{ data.name }}
                    </p>
                </template>
            </el-tree>
        </div>
        <div class="d-flex-1">
            <div class="d-flex">
                <el-radio-group v-model="playType" size="large">
                    <el-radio-button label="1">单屏</el-radio-button>
                    <el-radio-button label="4">四分屏</el-radio-button>
                    <el-radio-button label="9">九分屏</el-radio-button>
                    <!-- <el-radio-button label="full">全屏</el-radio-button> -->
                </el-radio-group>
                <el-button size="large" class="ml-10" @click="fullscreenAction"
                    >全屏</el-button
                >
            </div>
            <div
                class="screen-video"
                ref="screenVideoRef"
                :class="{
                    fullscreen: isFullscreen,
                    single: screenNum == 1,
                    four: screenNum == 4,
                    nine: screenNum == 9,
                }"
            >
                <div
                    class="video-item"
                    v-for="(item, index) in screenNum"
                    :key="index"
                >
                    <el-button
                        v-if="playList[index]"
                        class="video-btn"
                        @click="
                            internalCloseVideo(index, playList[index].number)
                        "
                        >关闭</el-button
                    >

                    <videoItem
                        ref="videoItemRefs"
                        :videoData="playList[index]"
                        :videoSize="videoSize"
                        v-if="playList[index]"
                    ></videoItem>
                </div>
                <el-button
                    type="primary"
                    class="exit-fullscreen"
                    @click="isFullscreen = false"
                >
                    退出全屏
                </el-button>
            </div>
        </div>
        <!-- <control></control> -->
    </div>
</template>
<style lang="scss" scoped>
.device-tree {
    width: 300px;
    border: 1px solid #eee;
    padding: 20px;
    margin-right: 20px;
    height: calc(100vh - 180px);
    .device-node {
        &.active {
            color: var(--el-color-primary);
            font-weight: bold;
        }
    }
}
.screen-video {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 250px);
    margin-top: 20px;
    background: #000;
    &.fullscreen {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 12;
        height: 100%;
        width: 100%;
        margin-top: 0;
        .exit-fullscreen {
            display: block;
        }
    }
    .exit-fullscreen {
        display: none;
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 12;
    }
    .video-item {
        position: relative;
        width: 100%;
        height: 100%;
        color: #fff;
        .video-btn {
            position: absolute;
            right: 0;
            z-index: 9999;
        }
    }
    &.four {
        .video-item {
            width: 50%;
            height: 50%;
            border-bottom: 1px solid rgba(#fff, 0.2);
            border-right: 1px solid rgba(#fff, 0.2);
            &:nth-child(2n) {
                border-right: none;
            }
        }
    }
    &.nine {
        .video-item {
            width: 33.33%;
            height: 33.33%;
            border-bottom: 1px solid rgba(#fff, 0.2);
            border-right: 1px solid rgba(#fff, 0.2);
            &:nth-child(3n) {
                border-right: none;
            }
        }
    }
}
</style>
